<template>

    <el-container style="height: 100%;">
            <!--  左侧边  -->

        <el-aside :width="asideWidth" style="background-color: #191a23;margin: 0;padding: 0;height: 100%">
            <el-scrollbar style="height: 100%">

                <SysAside :isCollapse="isCollapse"></SysAside>
            </el-scrollbar>

            </el-aside>



        <el-container>
            <!--   右上   -->
            <el-header
                    style="height: 55px;line-height: 55px;background-color: #f4f7f9;box-shadow: 0 5px 4px rgba(0,21,41,.08);">
                <SysHeader @backNewAsideWidth="updateAsideWidth"
                           @backNewIsCollapse="updateIsCollapse"
                           :isCollapse="isCollapse" :asideWidth="asideWidth"></SysHeader>
            </el-header>
            <!--    右下  -->
<!--            <el-main style="background-color: #f4f7f9">-->
            <el-main>
                <SysMain></SysMain>
            </el-main>
        </el-container>
    </el-container>

</template>

<script>
    import SysMain from './layout/sys-main'
    import SysHeader from './layout/sys-header'
    import SysAside from './layout/sys-aside'


    export default {
        name: 'Home',
        data() {
            return {
                asideWidth: '260px',
                isCollapse: false,
            }
        },
        components: {
            SysMain, SysHeader, SysAside
        },

        methods: {
            updateAsideWidth(v) {
                this.asideWidth = v;
            },
            updateIsCollapse(v) {
                this.isCollapse = v;
            }

        }
    }
</script>
<style scoped>


    @import './home.css';







</style>
